Photo on jestjs.io

前言

上一篇已經簡單的介紹過 Jest 的初始作業，並執行簡單的測試
如果正在看這篇的大哥大姐還沒看過上一篇的話
小弟在下面附上連結，有興趣的大哥大姐可以快速地看一下
鼠年全馬鐵人挑戰 WEEK 18：Jest (上)
那這篇就要接續上一篇的內容開始實作囉～ ヽ(́◕◞౪◟◕‵)ﾉ

使用 Jest

基本用法

Matchers

在撰寫測試免不了還是要驗證預期結果
以下內容是較常使用到的匹配器
想要了解更多可以參考官方網站: Jest-expect

• 比對值是否預期
  toBe 用於檢查值是否符合預期
  toEqual 用於檢查 Object 值是否完全相等
  
• 比對值狀態是否預期
  toBeNull 僅匹配 null
  toBeUndefined 僅匹配 undefined
  toBeDefined 與 toBeUndefined 相反
  toBeTruthy 匹配 if 語句視為 true 的任何內容
  toBeFalsy 匹配 if 語句視為 false 的任何內容
  
• 比對數字是否預期
  toBeGreaterThan 大於
  toBeGreaterThanOrEqual 大於等於
  toBeLessThan 小於
  toBeLessThanOrEqual 小於等於
  
• 比對字串，陣列是否包含值
  toMatch 使用正規表示法檢查字串
  toContain 使用迭代檢查是否包含特定項目
  

Setup, Teardown

通常，在撰寫測試腳本時
需要在測試執行前進行一些前置作業
或是在測試執行後進行一些結束動作

在 Robot Framework 和 Nightwatch.js 都有這個功能
當然 Jest 也不例外，提供了此功能來解決此問題

最常見的有以下四種 (按照執行順序排列分別是)

• beforeAll(() => { ... }); : 測試檔案開始執行前
• beforeEach(() => { ... }); : 每個測試開始執行前
• afterEach(() => { ... }); : 每個測試執行結束後
• afterAll(() => { ... }); : 測試檔案執行結束後

撰寫測試

小弟這次就使用六角學院大大釋出的馬拉松 API 資料
來驗證回傳值是否符合預期
測試的內容簡單的分成三個

• 測試 key ID 是否正確
• 測試文章篇數是否小於等於 40 篇
• 測試個人網頁連結是否正確

首先先建立一份文件用來 get request

接者建立所要測試的 馬拉松 API 文件並進行回傳

最後就是建立測試腳本的測試文件

執行測試

在上一篇 鼠年全馬鐵人挑戰 WEEK 18：Jest (上) 的內容中
小弟已經更改過 package.json 文件中的 script

"scripts": {
  "test": "jest"
}

因此只需要在 terminal 中執行 $ npm run test 就可以執行所有測試了

備註
sum.test.js 是上一篇文章的測試
demo.test.js 是上一個小節所提到過的所有基本用法測試
w3hexschool.test.js 是這個小節所撰寫的馬拉松 API 測試腳本

檢查報告

如果覺得執行測試的回傳報告有點少
也可以到 package.json 文件中改一下 script
加一下 --coverage
可以檢查 js 文件測試的涵蓋程度

"scripts": {
  "test": "jest --coverage"
}

執行結果如下

小弟沒有測試 Promise 的 error 狀況
所以沒有完美的 100 趴 இдஇ

另外在專案底下也會多一份資料夾
可以點選裡面的 index.html 來查看更詳細的內容

覺得還是不滿意的話沒關係
有很多大神已經幫你把 html report 的套件寫好了
趕快來看看有哪些吧

jest-stare

一開始當然是先安裝 jest-stare 啦～
$ npm install --save-dev jest-stare

安裝完之後接著設定一些參數
新增一份 jest.config.json 文件，內容如下

{
  "reporters": [
    "default",
    [
      "jest-stare", {
        "resultDir": "report/jest-stare",
        "reportTitle": "jest-stare!",
        "additionalResultsProcessors": [
          "jest-junit"
        ],
        "coverageLink": "../../coverage/lcov-report/index.html",
        "jestStareConfigJson": "jest-stare.json",
        "jestGlobalConfigJson": "globalStuff.json"
    }]
  ]
}

設定完之後，再執行一次測試
此時又會再多一份 report 資料夾
裡面的 jest-stare 資料夾中會有 index.html 的文件
開啟它就可以看到漂漂亮亮的 report 囉～

jest-html-reporters

一開始當然也是先安裝 jest-html-reporters 啦～
$ npm install --save-dev jest-html-reporters

安裝完之後，
如果試過上一個就直接把 jest.config.json 文件，的內容改一下
如果還沒的話就新增一個新的文件吧，內容如下

{
  "reporters": [
    "default",
    [
      "jest-html-reporters", {
        "publicPath": "report/jest-html-reporters"
    }]
  ]
}

設定完之後，再執行一次測試
此時 report 資料夾會再多一份 jest-html-reporters 資料夾
開啟 jest_html_reporters.html 的文件
就可以看到另一個漂漂亮亮的 report 囉～

結尾

以上是這兩週的 Jest 的介紹
jest 的基本語法與漂亮的 Report 希望對在看的大哥大姐有幫助

如果有疑問或是有錯誤，還請各位大哥大姐提點。
小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ

參考文件:

Jest · ? Delightful JavaScript Testing
jest-html-reporters
jest-stare